<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="核销台" navbarType='0'></wlk-navbar>
        <block v-if="!loading">
            <view class="verify-content pd30">
                <view  class="goods-info pd30 wlkflex justify-between wd100 align-start bgw wrap shadow br08">
                    <view class="o-info-img br04 overHidden">
                        <image class="wd100 hg100" lazy-load :src="item.goods.goods_images[0]"  mode="aspectFill"/>
                    </view>
                    <view class="o-info-main wlkflex wrap align-content-between">
                        <view>
                            <view class="o-main-title u-line-2">
                                {{item.goods.goods_title}}
                            </view>
                            <view class="o-main-desc u-line-1 mt10">
                                {{item.goods.goods_desc}}
                            </view>
                        </view>

                        <view class="wlkflex justify-between mt20 wd100">
                            <view class="o-main-price bold right wlkflex wd100 justify-end">
                               <view class="mr10 price-title">实付款</view> ¥ <view>{{item.goods.total_fee}}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="detail shadow">
                    <view class="head-title wlkflex">
                        <view class="tip" :style="{backgroundColor: themeColor}"></view>
                        <view class="title bold">核销信息</view>
                    </view>
                    <u-cell-group :border="false">
                        <u-cell  :border="false">
                            <uni-icons slot="icon" type="person" size="25"></uni-icons>
                            <text class="title" slot="title">用户昵称</text>
                            <text class="col9 value"  slot="value">{{item.user.nickname}}</text>
                        </u-cell>
                        <u-cell  :border="false">
                            <uni-icons slot="icon" type="scan" size="25"></uni-icons>
                            <text class="title" slot="title">核销码</text>
                            <text class="col9 value" slot="value">{{item.code}}</text>
                        </u-cell>
                        <u-cell  :border="false">
                            <uni-icons slot="icon" type="notification" size="25"></uni-icons>
                            <text class="title" slot="title">状态</text>
                            <text class="col9 value"  slot="value">{{item.status_text}}</text>
                        </u-cell>
                        <block v-if="item.status>0">
                            <u-cell  :border="false">
                                <uni-icons slot="icon" type="shop" size="25"></uni-icons>
                                <text class="title" slot="title">核销商户</text>
                                <text class="col9 value"  slot="value">{{item.merch.name}}</text>
                            </u-cell>
                            <u-cell  :border="false">
                                <uni-icons slot="icon" type="auth" size="25"></uni-icons>
                                <text class="title" slot="title">核销员</text>
                                <text class="col9 value"  slot="value">{{item.saler.nickname}}</text>
                            </u-cell>
                            <u-cell  :border="false">
                                <uni-icons slot="icon" type="calendar" size="25"></uni-icons>
                                <text class="title" slot="title">核销时间</text>
                                <text class="col9 value"  slot="value">{{$u.timeFormat(item.verifytime, 'yyyy-mm-dd hh:MM:ss')}}</text>
                            </u-cell>
                        </block>
                    </u-cell-group>
                </view>
                <view class="detail shadow">
                    <view class="head-title wlkflex">
                        <view class="tip" :style="{backgroundColor: themeColor}"></view>
                        <view class="title bold">核销照片</view>
                    </view>
                    <view class="pd30">
                        <u-upload
                                :fileList="item.status==0?images:item.fileList"
                                @afterRead="afterRead"
                                @delete="deletePic"
                                name="1"
                                multiple
                                :deletable="item.status==0"
                                :maxCount="item.status==0?9:!$u.test.isEmpty(item.fileList)?item.fileList.length:0"
                        ></u-upload>
                    </view>
                </view>
            </view>
            <view class="wlk-fixed-btn"  v-if="item.status==0">
                <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }"  :color="themeColor" :disabled="item.status!=0" size="large" @click="submitModel=true" text="确认核销"></u-button>
            </view>
            <view class="wlk-fixed-btn"  v-else-if="item.status==1">
            <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }"  :color="themeColor" :disabled="item.status!=1" size="large" @click="finishModel=true" text="清洗完成"></u-button>
            </view>
        </block>
         <u-modal :show="submitModel" title="提示" showCancelButton @confirm="submit" @cancel="submitModel=false" :confirmColor="themeColor" content="是否确认核销？"></u-modal>
         <u-modal :show="finishModel" title="提示" showCancelButton @confirm="finish" @cancel="finishModel=false" :confirmColor="themeColor" content="是否确认清洗完成？"></u-modal>
    </view>
</template>
<script>
    import {getUrlQuery} from '@/wlkutils/tools';
    import {mapMutations, mapGetters} from 'vuex';
    import base from '@/base';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor','initMain'])
        },
        onLoad(query) {
          _self = this;
          if (query.q){
            let url = decodeURIComponent(query.q)
            let code = getUrlQuery(url, 'code');
            if (code) {
              _self.code = code;
              _self.getData();
            } else {
              uni.$u.toast('请扫描正确的二维码');
            }
          }else{
            _self.code = this.$Route.query.code;
            _self.getData();
          }
        },
      data() {
        return {
          item: {},
          images: [],
          code: '',
          loading: true,
          submitModel: false,
          finishModel: false
        }
      },
      onShow() {
      },

      methods: {
        async getData() {
          this.loading = true;
          uni.$u.http.post('verify/getDetail', {
            code: _self.code
          }).then(res => {
            _self.item = res.data.item;
            _self.loading = false;
          }).catch(res => {
                })
            },
            submit(){
                if (uni.$u.test.isEmpty(this.images)) {
                    uni.showToast({
                        title: '请上传核销照片~',
                        icon: 'none'
                    });
                    return
                }
                var json = new Object();
                const images = _self.images.map(obj => obj.fileUrl);
                json.images = images.join(',');
                json.code = _self.code;
                uni.$u.http.post('verify/use', json).then(res => {
                    _self.submitModel = false;
                    uni.$u.toast(res.msg);
                    _self.getData();
                }).catch(res => {
                })
            },
            finish(){
                var json = new Object();
                json.code = _self.code;
                uni.$u.http.post('verify/finish', json).then(res => {
                    _self.finishModel = false;
                    uni.$u.toast(res.msg);
                    _self.getData();
                }).catch(res => {
                })
            },
            deletePic(event) {
                this.images.splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this.images.length
                lists.map((item) => {
                    this.images.push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url);
                    console.log(result)
                    let item = this.images[fileListLen]
                    this.images.splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result.url,
                        fileUrl:result.fileUrl
                    }))
                    fileListLen++;
                }
            },

            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: base.apiUrl+'common/upload',
                        filePath: url,
                        name: 'file',
                        formData: {
                            user: 'test'
                        },
                        success: (res) => {
                            resolve(JSON.parse(res.data).data);
                        }
                    });
                })
            },

        }
    };
</script>
<style lang="scss">
    page{
        padding-bottom: 150rpx;
        .verify-content {
            .goods-info{
                .o-info-img{
                    width: 200rpx;
                    height:  200rpx;
                    text-align: center
                }
                .o-info-main{
                    width: 65%;
                    height:  200rpx;
                    .o-main-title{
                        font-size: $font-lt;
                        font-weight: bold;
                    }
                    .o-main-desc{
                        font-size: $font-sm;
                        color: #666;
                    }
                    .o-main-price{
                        font-size: $font-base;
                        color: #333;
                    }
                    .o-main-qrcode{
                        border-radius: 80rpx;
                        padding: 10rpx 20rpx;
                        font-size: $font-sm;
                        background-color: #f3f3f3;
                        color: #666666;
                    }
                    .o-main-status{}
                    .o-main-user{
                        font-size: $font-sm;
                        color: #666;
                    }
                }
            }
            .detail{
                .head-title{
                    padding: 0 30rpx 30rpx 30rpx;
                    .tip{
                        width: 8rpx;
                        height: 28rpx;
                        margin-right: 10rpx;
                        border-radius: 10px;
                    }
                    .title{
                        font-size: $font-lt;
                    }
                }
                border-radius: 8px;
                background-color: #FFFFFF;
                font-size:$font-base;
                padding: 30rpx 0 40rpx 0;
                margin-top: 40rpx;
                .u-cell{
                    padding:10rpx 0;
                }
                .title{
                    font-size:$font-base;
                }
                .value{
                    font-size:$font-base;
                }
            }
        }

    }

</style>
